<!--
 * @Author: your name
 * @Date: 2022-02-21 14:49:38
 * @LastEditTime: 2022-02-22 10:20:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \demo\src\views\calendar-dialog\index.vue
-->
<template>
  <div class="mytable">
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="50">
      </el-table-column>
      <el-table-column align="center" prop="qylx" label="企业类型" width="100">
      </el-table-column>
      <el-table-column align="center" prop="dl" label="登录"> </el-table-column>
      <el-table-column align="center" prop="qymc" label="企业名称">
      </el-table-column>
      <el-table-column align="center" prop="sj" label="数据"> </el-table-column>
      <el-table-column align="center" prop="dw" label="单位"> </el-table-column>
      <el-table-column align="center" prop="address" width="280" label="操作">
        <template slot-scope="scope">
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="success" @click="lookDate(scope)"
            >查看日历</el-button
          >
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  -->
    <myDialog ref="myDialog" />
    <!--  -->
  </div>
</template>

<script>
import myDialog from "./myDialog.vue";
export default {
  components: {
    myDialog,
  },
  data() {
    return {
      tableData: [
        {
          telephone: "0551-1111331",
          phone: "13322223331",
          qylx: "企业类型1",
          dl: "user1",
          qymc: "企业名称1",
          sj: "数据1",
          dw: "单位1",
        },
        {
          telephone: "0551-1111332",
          phone: "13322223332",
          qylx: "企业类型2",
          dl: "user2",
          qymc: "企业名称2",
          sj: "数据2",
          dw: "单位2",
        },
        {
          telephone: "0551-1111333",
          phone: "13322223333",
          qylx: "企业类型3",
          dl: "user3",
          qymc: "企业名称3",
          sj: "数据3",
          dw: "单位3",
        },
        {
          telephone: "0551-1111334",
          phone: "13322223334",
          qylx: "企业类型4",
          dl: "user4",
          qymc: "企业名称4",
          sj: "数据4",
          dw: "单位4",
        },
        {
          telephone: "0551-1111335",
          phone: "13322223335",
          qylx: "企业类型5",
          dl: "user5",
          qymc: "企业名称5",
          sj: "数据5",
          dw: "单位5",
        },
        {
          telephone: "0551-1111336",
          phone: "13322223336",
          qylx: "企业类型6",
          dl: "user6",
          qymc: "企业名称6",
          sj: "数据6",
          dw: "单位6",
        },
        {
          telephone: "0551-1111337",
          phone: "13322223337",
          qylx: "企业类型7",
          dl: "user7",
          qymc: "企业名称7",
          sj: "数据7",
          dw: "单位7",
        },
        {
          telephone: "0551-1111338",
          phone: "13322223338",
          qylx: "企业类型8",
          dl: "user8",
          qymc: "企业名称8",
          sj: "数据8",
          dw: "单位8",
        },
      ],
    };
  },

  created() {},

  methods: {
    lookDate(scope) {
      // 从当前行中将当前数据、索引解构出来
      const { row: data, $index: index } = scope;
      // 调用组件api 初始化弹窗数据  并打开弹窗 将数据传进去
      this.$refs.myDialog.openDialog(data);
    },
  },
};
</script>

<style scoped lang='less'>
.mytable {
  width: 1200px;
  margin: 40px auto;
}
</style>
